<template>
	<view>
		<view class="banner">
			<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000" :duration="1000"
				indicator-active-color="#4289F3" indicator-color="rgba(66, 137, 243, 0.2)">
				<swiper-item v-for="(item,index) in imgs">
					<view class="swiper-item">
						<image :src="baseurl+item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="shadow"></view>
			<view class="dropBox">
				<view class="drop select"></view>
				<view class="drop"></view>
			</view>
		</view>
		<view class="shop">
			<view class="shopAbox">
				<view class="shopCon" @click="companyDetail">
					<image :src="baseurl+detail.avatar" mode="aspectFill"></image>
					<view class="shopDetail">
						<view class="shopName">{{detail.shopname}}</view>
					</view>
				</view>
			</view>
			<view class="shopBbox">
				<view class="shopLcon">
					<view class="divide">{{detail.score}}</view>
					<view class="star">
						<image
							:src="detail.score >= 1 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="detail.score >= 2 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="detail.score >= 3 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="detail.score >= 4 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="detail.score >= 5 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="label">
					<view>月销{{detail.monthly_sales_order}}+</view>
					<view>人均￥{{detail.per_capita}}</view>
				</view>
			</view>
			<view class="times">营业时间：{{detail.start_time}}-{{detail.end_time}}</view>
			<view class="shopCbox">
				<view class="addressCon">
					<view class="address">{{detail.address}}</view>
					<view class="km">距您{{detail.distance}}公里</view>
				</view>
				<view class="operate">
					<view class="use" @click="address">
						<image :src="baseurl+'/imgs/re1.png'" mode="widthFix"></image>
						<view>导航</view>
					</view>
					<view class="use" @click="call">
						<image :src="baseurl+'/imgs/re2.png'" mode="widthFix"></image>
						<view>电话</view>
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">店铺介绍</view>
		</view>
		<view class="jieshao">
			<text>{{detail.bio||''}}</text>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">满减券</view>
		</view>
		<view class="lc-new-box" v-for="(item,index) in detail.coupon_list">
			<image :src="baseurl+'/imgs/505bd342074738cd5a3cf2da2bf0a13.png'" mode="widthFix"></image>
			<view class="lc-detail">
				<view class="lc-down">
					<view class="lc-price">满{{item.limit}}减{{item.price}}</view>
					<view class="lc-num" v-if="item.drawlimit>0">每人限制{{item.drawlimit}}张</view>
				</view>
				<view class="lc-fies">
					<view class="lc-coms">
						<view class="lc-words">{{item.content}}</view>
						<view class="lc-money"><text>￥</text>{{item.price}}</view>
					</view>
					<view class="lc-buy" @click="receive(item.id)">领取</view>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">团购</view>
		</view>
		<view class="list" v-for="(item,index) in detail.goods_list">
			<image :src="baseurl+item.thumbnail" mode="aspectFill"></image>
			<view class="goods">
				<view class="goodsName">{{item.title}}</view>
				<view class="evaluate">
					<image src="/static/okk.png" mode="widthFix"></image>
					<view>{{item.pingfen}}分</view>
				</view>
				<view class="money">
					<view class="price"><text>￥</text>{{item.price}}</view>
					<view class="original">￥{{item.market_price}}</view>
				</view>
				<view class="buy" @click="goodsDetail(item.id)">抢购</view>
			</view>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">评价({{num}})</view>
			<!-- 			<view class="comment-all" @click="comment">
				<view>查看全部</view>
				<image src="/static/next.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="comment-list">
			<view class="comment">
				<view class="more-list" v-for="(item,index) in list">
					<view class="more-user">
						<image :src="baseurl+item.user.avatar" mode="aspectFill" class="user-img">
						</image>
						<view class="user-detail">
							<view class="user-infor">
								<view>{{item.user.nickname}}</view>
							</view>
							<view class="time">{{item.createtime}}</view>
						</view>
					</view>
					<view class="dudu">
						<image
							:src="item.score >= 1 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="item.score >= 2 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="item.score >= 3 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="item.score >= 4 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="item.score >= 5 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
					</view>
					<view class="conswor">{{item.content}}</view>
					<view class="sp-imgs">
						<image :src="baseurl+img" mode="aspectFill" v-for="(img,num) in item.images"
							@click="lookImage(index,num,img)">
						</image>
					</view>
					<view class="shop-hf" v-if="item.reply">
						<view class="s-title">商家回复</view>
						<view class="s-words">{{item.reply}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="null"></view>

	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				app: getApp().globalData,
				headHeight: 0,
				baseurl: getApp().globalData.baseurl,
				score: 5,
				type: false,
				detail: {},
				page: 1,
				id: '',
				list: [],
				imgs: [],
				num: 0
			};
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		created() {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
		},
		onLoad(e) {
			this.id = e.id
			this.app.post('/api/chef/index/store_info_new', {
				id: e.id,
				lng: uni.getStorageSync('longitude'),
				lat: uni.getStorageSync('latitude'),
			}).then(res => {
				console.log(res)
				this.detail = res
				this.imgs = res.shop_image.split(',')
				this.getList()
			})
		},
		methods: {
			receive(id) {
				this.app.post('/api/wanlshop/coupon/receive', {
					id: id,
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '领取成功',
						icon: "none"
					})
				})
			},
			goodsDetail(id) {
				uni.navigateTo({
					url: '/pages/lc/goodsDetail/goodsDetail?id=' + id
				})
			},
			companyDetail() {
				uni.navigateTo({
					url: '/pages/lc/companyDetail/companyDetail?id=' + this.id
				})
			},
			
			getList() {
				this.app.post('/api/chef/index/store_comment', {
					page: this.page,
					id: this.id,
					tag: '',
				}).then(res => {
					console.log(res)
					this.num = res.comment.all
					this.list = this.list.concat(res.comment.list.data)
				})
			},
			address() {
				uni.openLocation({
					latitude: Number(this.detail.latitude),
					longitude: Number(this.detail.longitude),
					scale: 18,
					name: this.detail.shopname,
					address: this.detail.address,
					fail: (res) => {
						console.log(res)
					}
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: String(this.detail.mobile),
					fail: (res) => {
						console.log(res)
					}
				});
			},
			comment() {
				uni.navigateTo({
					url: '/pages/lc/comment/comment'
				})
			},
			show() {
				this.type = true
			},
			close() {
				this.type = false
			}
		},
		onReachBottom() {
			this.page += 1;
			this.getList();
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.headcontent {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		z-index: 6666;

		.contentbox {
			width: 750rpx;
			display: flex;
			position: relative;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
				position: relative;
				z-index: 999;
			}
		}
	}

	.banner {
		width: 750rpx;
		height: 498rpx;
		position: relative;

		.shadow {
			width: 750rpx;
			height: 498rpx;
			position: absolute;
			top: 0;
			z-index: 1;
			// background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 40%);
		}

		swiper {
			width: 750rpx;
			height: 498rpx;
			position: relative;



			.swiper-item {
				width: 750rpx;
				height: 498rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.dropBox {
			width: 700rpx;
			margin-left: 34rpx;
			display: flex;
			position: absolute;
			bottom: 60rpx;

			.drop {
				width: 46rpx;
				height: 7rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50rpx;
				margin-right: 8rpx;
			}

			.select {
				background-color: #fff;
			}
		}
	}

	.shop {
		width: 750rpx;
		margin-top: -45rpx;
		position: relative;
		background-color: #F7F7F7;
		border-radius: 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 45rpx;

		.shopAbox {
			width: 664rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.shopCon {
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.shopDetail {
					margin-left: 32rpx;

					.shopName {
						font-size: 33rpx;
						color: #3D3D3D;
					}

					.shopNum {
						font-size: 26rpx;
						color: #999999;
						margin-top: 10rpx;

						text {
							color: #84BD00;
							margin-right: 10rpx;
						}
					}
				}
			}

			.follow {
				width: 157rpx;
				height: 65rpx;
				border: 1px solid #84BD00;
				color: #84BD00;
				font-size: 30rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.shopBbox {
			width: 664rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 33rpx;

			.shopLcon {
				width: 200rpx;
				height: 32rpx;
				background: rgba(251, 78, 47, 0.08);
				border-radius: 50rpx;
				display: flex;

				.divide {
					width: 72rpx;
					height: 32rpx;
					background-color: #FB4E2F;
					border-radius: 50rpx 0px 8rpx 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #fff;
				}

				.star {
					width: 138rpx;
					height: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 16rpx;
						height: 16rpx;
						margin-left: 4rpx;
						margin-right: 4rpx;
					}
				}
			}

			.label {
				display: flex;
				align-items: center;

				view {
					font-size: 26rpx;
					color: #999999;
					margin-left: 38rpx;
				}
			}
		}

		.times {
			width: 664rpx;
			font-size: 24rpx;
			margin-top: 30rpx;
		}

		.shopCbox {
			width: 664rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.addressCon {
				width: 470rpx;

				.address {
					font-size: 30rpx;
					color: #3D3D3D;
				}

				.km {
					font-size: 26rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}

			.operate {
				display: flex;

				.use {
					width: 52rpx;
					margin-left: 42rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					image {
						width: 52rpx;
						height: 52rpx;
					}

					view {
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
		}
	}

	.lc-new-box {
		width: 690rpx;
		height: 160rpx;
		position: relative;
		margin-left: 30rpx;

		image {
			width: 690rpx;
			height: 160rpx;
		}

		.lc-detail {
			position: absolute;
			top: 0;
			left: 0;
			width: 690rpx;
			height: 160rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: center;

			.lc-down {
				width: 630rpx;
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lc-price {
					font-size: 30rpx;
					color: #3D3D3D;
				}

				.lc-num {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.lc-fies {
				width: 630rpx;
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;

				.lc-coms {
					.lc-words {
						font-size: 24rpx;
						color: #999999;
					}

					.lc-money {
						font-size: 36rpx;
						color: #FB4E2F;

						text {
							font-size: 26rpx;
						}
					}
				}

				.lc-buy {
					width: 136rpx;
					height: 64rpx;
					background-color: #FB4E2F;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.jieshao {
		width: 664rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 43rpx;
		padding: 26rpx 0;

		text {
			padding: 26rpx;
		}
	}

	.title {
		width: 664rpx;
		margin-left: 43rpx;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		position: relative;

		.line {
			width: 8rpx;
			height: 34rpx;
			background-color: #84BD00;
			border-radius: 50rpx;
		}

		.titleName {
			font-size: 33rpx;
			color: #3D3D3D;
			margin-left: 17rpx;
		}

		.comment-all {
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;

			view {
				font-size: 24rpx;
				color: #999999;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}
	}

	.list {
		width: 690rpx;
		background-color: #fff;
		padding: 28rpx 0;
		margin-left: 30rpx;
		border-radius: 20rpx;
		display: flex;
		margin-bottom: 20rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			margin-left: 26rpx;
		}

		.goods {
			width: 416rpx;
			margin-left: 22rpx;
			display: flex;
			align-content: space-between;
			flex-wrap: wrap;
			position: relative;

			.goodsName {
				width: 100%;
				font-size: 30rpx;
				color: #3D3D3D;
			}

			.goodsLave {
				width: 100%;
				font-size: 26rpx;
				color: #999999;
			}

			.evaluate {
				width: 157rpx;
				height: 39rpx;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #F7F7F7;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 0 !important;
				}

				view {
					font-size: 22rpx;
					color: #666666;
					margin-left: 6rpx;
				}
			}

			.money {
				width: 100%;
				display: flex;
				align-items: flex-end;

				.price {
					color: #FB4E2F;
					font-size: 36rpx;

					text {
						font-size: 26rpx;
					}
				}

				.original {
					font-size: 26rpx;
					color: #999999;
					margin-left: 10rpx;
					text-decoration: line-through;
					margin-bottom: 4rpx;
				}
			}

			.buy {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 136rpx;
				height: 65rpx;
				background-color: #84BD00;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				font-size: 26rpx;
				color: #fff;
			}
		}
	}

	.advertisement {
		width: 690rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.comment-list {
		width: 690rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-left: 30rpx;

		.lc-laber {
			width: 630rpx;
			padding: 30rpx 0;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;

			view {
				font-size: 24rpx;
				color: #84BD00;
				background: rgba(132, 189, 0, 0.1);
				border-radius: 10rpx;
				width: 152rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.comment {
			width: 690rpx;



			.c-head {
				width: 630rpx;
				display: flex;
				align-items: center;
				margin-left: 30rpx;
				padding-top: 30rpx;

				.c-h-name {
					font-size: 26rpx;
					margin-right: 80rpx;
					color: #333333;

					text {
						color: #999999;
						margin-left: 10rpx;
					}
				}

				.select-c-h-name {
					font-size: 26rpx;
					margin-right: 80rpx;
					color: #84BD00;

					text {
						color: #999999;
						margin-left: 10rpx;
					}
				}
			}

			.c-tab {
				width: 690rpx;
				display: flex;
				align-items: center;
				margin-left: 30rpx;
				padding: 30rpx 0;

				.c-t-name {
					background-color: #F6F6F6;
					padding: 8rpx 20rpx;
					font-size: 26rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}

				.select-c-t-name {
					background: rgba(140, 47, 82, 0.1);
					padding: 8rpx 20rpx;
					font-size: 26rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
					color: #84BD00;
				}
			}

			.more-list {
				width: 690rpx;
				padding: 30rpx 0;
				background-color: #FFFFFF;
				border-bottom: 1px solid #eee;

				.more-user {
					width: 630rpx;
					margin-left: 30rpx;
					display: flex;
					align-items: center;

					.user-img {
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}

					.user-detail {
						width: 550rpx;
						margin-left: 18rpx;
						display: flex;
						justify-content: space-between;

						.user-infor {
							display: flex;
							align-items: center;

							view {
								font-size: 24rpx;
								color: #333333;
							}

							image {
								width: 73rpx;
								height: 30rpx;
								margin-left: 10rpx;
							}
						}

						.time {
							font-size: 22rpx;
							color: #999999;
						}
					}
				}

				.dudu {
					width: 630rpx;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					margin-left: 30rpx;

					view {
						font-size: 24rpx;
						color: #9E9E9E;
					}

					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 12rpx;
					}
				}

				.conswor {
					width: 630rpx;
					font-size: 30rpx;
					margin-left: 30rpx;
					color: #333333;
					margin-top: 20rpx;
				}

				.sp-imgs {
					width: 630rpx;
					margin-left: 30rpx;
					display: flex;
					flex-wrap: wrap;

					image {
						width: 180rpx;
						height: 180rpx;
						margin-top: 20rpx;
						margin-right: 20rpx;
						border-radius: 16rpx;
					}
				}

				.shop-hf {
					width: 630rpx;
					margin-left: 30rpx;
					padding: 30rpx;
					background-color: #F6F6F6;
					border-radius: 16rpx;
					margin-top: 20rpx;

					.s-title {
						font-size: 24rpx;
						color: #9E9E9E;
					}

					.s-words {
						font-size: 24rpx;
						color: #9E9E9E;
						margin-top: 20rpx;
					}
				}

				.tj-box {
					width: 690rpx;
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.tj-title {
						font-size: 24rpx;
						color: #333333;
					}

					.tj-shop {
						display: flex;
						align-items: center;
						background: rgba(140, 47, 82, 0.1);
						padding: 10rpx 20rpx;
						border-radius: 10rpx;

						view {
							font-size: 26rpx;
							color: #84BD00;
						}

						image {
							width: 20rpx;
							height: 20rpx;
							margin-top: 4rpx;
							margin-left: 4rpx;
						}
					}
				}
			}
		}
	}

	.null {
		width: 750rpx;
		height: 30rpx;
	}

	.lc-black {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .7);
		z-index: 9999999999;

		.lc-white {
			width: 750rpx;
			background-color: #F6F6F6;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			position: fixed;
			bottom: 0;

			.lc-goods-box {
				width: 690rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 162rpx;
					height: 162rpx;
					border-radius: 16rpx;
				}

				.lc-goods-detail {
					width: 504rpx;
					height: 142rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.lc-goods-name {
						width: 100%;
						font-size: 33rpx;
						color: #3D3D3D;
					}

					.lc-goods-sow {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.lc-goods-money {
							font-size: 36rpx;
							color: #3D3D3D;
						}

						.lc-goods-ths {
							display: flex;
							align-items: center;

							.lc-goods-edit {
								width: 48rpx;
								height: 48rpx;
								color: #999999;
								border: 1px solid #999999;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50%;
							}

							.lc-goods-num {
								font-size: 30rpx;
								color: #333333;
								margin-left: 20rpx;
								margin-right: 20rpx;
							}

							.lc-goods-add {
								width: 48rpx;
								height: 48rpx;
								color: #FFFFFF;
								border: 1px solid #84BD00;
								background-color: #84BD00;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50%;
							}
						}
					}
				}
			}

			.lc-goods-details {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				width: 690rpx;
				margin-top: 30rpx;

				.lc-a-box {
					width: 630rpx;
					margin-left: 30rpx;
					height: 88rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #eee;

					.lc-a-box-l {
						font-size: 30rpx;
						color: #3D3D3D;

						text {
							color: #999999;
						}
					}

					.lc-a-box-r {
						color: #3D3D3D;
						font-size: 30rpx;
					}
				}

				.lc-b-box {
					width: 630rpx;
					margin-left: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.lc-b-box-two {
						display: flex;
						align-items: center;

						.lc-b-box-title {
							width: 40rpx;
							height: 40rpx;
							background-color: #84BD00;
							font-size: 22rpx;
							color: #FFFFFF;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.lc-b-box-name {
							font-size: 26rpx;
							color: #3D3D3D;
							margin-left: 12rpx;
						}
					}

					.lc-b-box-next {
						display: flex;
						align-items: center;

						view {
							font-size: 26rpx;
							color: #84BD00;
						}

						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 8rpx;
						}
					}

					.lc-b-box-price {
						font-size: 26rpx;
						color: #84BD00;
					}
				}

				.lc-c-box {
					width: 630rpx;
					margin-left: 30rpx;
					text-align: right;
					font-size: 30rpx;
					color: #84BD00;
					line-height: 88rpx;
					margin-top: 30rpx;
					border-top: 1px solid #eee;

					text {
						color: #3D3D3D;
						margin-left: 10rpx;
					}
				}
			}

			.lc-goods-foot {
				width: 750rpx;
				background-color: #FFFFFF;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.lc-goods-l {
					margin-left: 30rpx;

					.lc-goods-lmoney {
						font-size: 24rpx;
						color: #84BD00;

						text {
							font-size: 36rpx;
						}
					}

					.lc-goods-rmoney {
						font-size: 24rpx;
						color: #999999;
						margin-top: 6rpx;
					}
				}

				.lc-goods-r {
					margin-right: 30rpx;
					background-color: #84BD00;
					color: #FFFFFF;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 200rpx;
					height: 80rpx;
				}
			}
		}
	}

	.whites {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx 0;
		margin-top: 30rpx;

		.scroll-view_H {
			white-space: nowrap;
			width: 660rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;

			.scroll-view-item_H {
				display: inline-block;
				width: 248rpx;
				margin-right: 30rpx;

				.border {
					border: 2px solid #9B5114 !important;
					border-radius: 20rpx;
					box-sizing: border-box;
				}

				.co-up {
					width: 248rpx;
					height: 178rpx;
					position: relative;
					box-sizing: border-box;
					border: 2px solid #fff;

					image {
						width: 248rpx;
						height: 170rpx;
					}

					.juti {
						position: absolute;
						width: 100%;
						height: 170rpx;
						left: 0;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						top: 0;
						background-color: #FEF7E5;
						border-radius: 20rpx;
						overflow: hidden;

						.ti1 {
							width: 180rpx;
							text-align: center;
							font-size: 20rpx;
							color: #9B5114;
							line-height: 30rpx;
							background-color: #FEE3AE;
							border-radius: 0 0 20rpx 20rpx;
						}

						.ti2 {
							width: 100%;
							text-align: center;
							font-size: 36rpx;
							color: #9B5114;

							.ts1 {
								font-size: 22rpx;
							}

							.ts2 {
								font-size: 22rpx;
								color: #CCAD8E;
							}
						}

						.ti3 {
							width: 100%;
							text-align: center;
							font-size: 20rpx;
							color: #9B5114;
						}

						.ti4 {
							width: 100%;
							text-align: center;
							font-size: 24rpx;
							color: #9B5114;
							line-height: 54rpx;
							background-color: #FEE3AE;
						}
					}
				}

				.co-down {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 16rpx;

					.co-money {
						color: #9B5114;
						font-size: 30rpx;

						text {
							color: #999999;
							font-size: 24rpx;
							margin-left: 10rpx;
							text-decoration: line-through;
						}
					}

					.co-qg {
						width: 83rpx;
						height: 42rpx;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						font-size: 24rpx;
						background: linear-gradient(270deg, #DB7C3B 0%, #E69850 100%);
					}

					.co-qgs {
						width: 83rpx;
						height: 42rpx;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						font-size: 24rpx;
						background: #9E9E9E;
					}
				}
			}
		}

		.pu {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.pu-title {
				font-size: 26rpx;
				color: #333333;
			}

			.pu-con {
				display: flex;
				align-items: center;


				view {
					font-size: 26rpx;
					color: #333333;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>